
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <style>
        .active{
color: red;
        }
    </style>
</head>
<body>
    <div class="box">
        <p>duanluo1</p>
        <p>duanluo3</p>
        <div class="box2">
            <p id="p2">duanluo2</p>
        </div>
        <ul >
            <li class="active">项目1</li>
            <li>项目2</li>
            <li>项目3</li>
            <li>项目4</li>
            <li>项目5</li>
        </ul>
    </div>
</body>
<script src="../lib/jquery.min.js"></script>
<script>
    $(function(){
        //children 用于从父元素中查找直接的子元素
    var c1=    $(".box").children("p")
    //find 用于从父元素中寻找所有子元素
    c1=    $(".box").find("p")
    console.log(c1);
    console.log("======================");
    //parent 用于从子元素查找直接父元素
    c1=$("#p2").parent().parent()
    console.log(c1);
    //parents 用于从子元素查找所有子元素
    c1=$("#p2").parents(".box")
    console.log(c1);
    $("ul").click(function(e){
      
       $(e.target).addClass("active").siblings().removeClass("active")
       

    })
    });

</script>
</html>

